<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机详细信息页面</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">
</head>
<style>
    a {

        text-decoration: none;
        color: #000;
    }

    .infopicture img {
        float: right;
        border: 1px solid #F2F2F2;
        margin: 10px 0;
    }

    .message {
        color: red;
        margin-bottom: 10px;
    }

    .name {
        color: #838383;
    }

    .price {
        background-color: #E7E7E7;
        margin-bottom: 5px;
    }

    .price .name {
        margin: 7px 0px;
    }

    .price .value {
        font-size: 25px;
        color: red
    }

    .freight {
        margin: 15px 0px;
    }

    .commentCount {
        border-top: dotted 1px;
        border-bottom: dotted 1px;
        margin: 5px 0px;
        padding: 5px 0px;
    }

    .tatol {
        text-align: center;
        border-right: solid 1px;
    }

    .integral {
        text-align: center;
    }

    .nettype {
        margin: 15px 0px;
        height: 34px;
        overflow: hidden;
    }

    .nettype .value {
        border: 1px #A7A6AC solid;
        width: 75px;
        padding: 5px;
    }

    .nettype .value:hover {
        border: 2px red solid;

    }

    .nettype .name {
        margin: 5px 0px;
    }

    .phonecolor {
        margin: 15px 0px;
        overflow: hidden;
    }

    .phonecolor .name {
        margin: 10px 0px;
    }

    .colorinfo {
        border: 1px #A7A6AC solid;
        width: 100px;
    }

    .colorinfo:hover {
        border: 1px red solid;
    }

    .set_meal {
        margin: 15px 0px;
        height: 34px;
        overflow: hidden;
    }

    .standard {
        border: 1px #A7A6AC solid;
        width: 75px;
        padding: 5px;
    }

    .standard:hover {
        border: 2px red solid;
    }

    .set_meal .name {
        margin: 5px 0px;
    }

    .capacity {
        margin: 15px 0px;
        height: 34px;
        overflow: hidden;
    }

    .capacitySize {
        border: 1px #A7A6AC solid;
        width: 75px;
        padding: 5px;
    }

    .capacitySize:hover {
        border: 2px red solid;
    }

    .capacity .name {
        margin: 5px 0px;
    }

    .buy {
        background-color: #FFEDED;
        color: red;
        border: red 1px solid;
        padding:10px;
        text-align: center;
        margin: 20px 10px 20px 20px;

    }
    .buy span{
        font-size: 20px;
    }

    .add {
        background-color: red;
        color: white;
        border-bottom: red 5px solid;
        padding:10px;
        text-align: center;
        margin: 20px 20px 20px 10px;
    }
    .add span{
        font-size: 20px;
    }
</style>

<body onload="initData()">
    <!-- begin -->
    <div class="container-fluid">
        <div class="row">
            <!-- 大图begin -->
            <div class="col-md-5" style="float: left; ">
                <div class="infopicture">
                    <img src="imgs/dxf.jpg">
                </div>
            </div>
            <!-- 大图end -->
            <!-- 详情begin -->
            <div class="col-md-5" style="float: left;">
                <!-- 标题begin -->
                <div class="title">
                    <h4><b>【限时优惠300元】华为科技潮牌/荣耀20i 3200万AI自拍渐变色官方旗舰店珍珠全面屏正品学生手机</b></h4>
                </div>
                <!-- 标题end -->
                <!-- 信息begin -->
                <div class="message">
                    <span>3200万AI自拍 超广角三摄</span>
                </div>
                <!-- 信息end -->
                <!-- 价格begin -->
                <div class="price">
                    <div class="col-md-3">
                        <div class="name">
                            <span>价格</span>
                        </div>
                    </div>
                    <div class="value">
                        <span>¥1599.00</span>
                    </div>
                </div>
                <!-- 价格end -->
                <!-- 运费begin -->
                <div class="freight">
                    <div class="col-md-3">
                        <div class="name">
                            <span>运费</span>
                        </div>
                    </div>
                    <div onload="initData()">
                        <div>
                            <!-- this - 当前对象 - 当前选中的option标签 -->
                            <select id="province" onchange="changeCity(this)">
                                <option value="-1">选择省份</option>
                            </select>

                            <select id="city">
                                <option value="-1">选择城市</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- 运费end -->
                <!-- 累计评价begin -->
                <div class="commentCount">
                    <div class="col-md-6 tatol">
                        <span class="name">累计评价<a href="#" style="color: red">45714</a></span>
                    </div>
                    <div class="integral">
                        <span class="name">送天猫积分<a href="#" style="color: green">159</a>起</span>
                    </div>
                </div>
                <!-- 累计评价end -->
                <!-- 网络类型begin -->
                <div class="nettype">
                    <div class="col-md-3">
                        <div class="name">
                            <span>网络类型</span>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <a href="#">
                            <div class=" value">
                                <span>4G全网通</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 网络类型end -->
                <!-- 手机颜色begin -->
                <div class="phonecolor">
                    <div class="col-md-3">
                        <div class="name">
                            <span>机身颜色</span>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <a href="#">
                            <div class="colorinfo">
                                <img src="imgs/red.jpg" alt="">
                                <span>渐变红</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 手机颜色end -->
                <!-- 套餐类型begin -->
                <div class="set_meal">
                    <div class="col-md-3">
                        <div class="name">
                            <span>套餐类型</span>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <a href="#">
                            <div class="standard">
                                <span>官方标配</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 套餐类型end -->
                <!-- 存储容量begin -->
                <div class="capacity">
                    <div class="col-md-3">
                        <div class="name">
                            <span>存储容量</span>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <a href="#">
                            <div class="capacitySize">
                                <span>6+64GB</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 存储容量end -->
                <!-- 数量begin -->
                <div class="count">
                    <div class="col-md-3">
                        <div class="name">
                            <span>数量</span>
                        </div>
                    </div>
                    <div>
                        <div class="col-md-3"></div>
                        <span class="name">件</span>
                    </div>
                </div>
                <!-- 数量end -->
                <!-- 购买添加begin -->
                <div class="buy_and_add">
                    <a href="#">
                        <div class="col-md-5 buy">
                            <span>立即购买</span>
                        </div>
                    </a>
                    <a href="#">
                        <div class="col-md-5 add">
                            <span class="glyphicon glyphicon-shopping-cart">加入购物车</span>
                        </div>
                    </a>
                </div>
                <!-- 购买添加end -->
                
            </div>
            <!-- 详情end -->
        </div>
    </div>
    <!-- end -->


    <script>
        var provinces = ["江苏省", "安徽省"];

        var citys = [["苏州", "南京", "无锡", "常州", "徐州", "盐城", "宿迁", "泰州", "连云港", "淮安"], ["蚌埠", "滁州", "合肥", "宿州", "芜湖", "淮南", "巢湖", "六安", "黄山", "池州", "博州"]];

        //定义一个方法 - 用来模拟数据
        function initData() {

            var pro = document.getElementById("province");

            //遍历省份的数组
            for (var i = 0; i < provinces.length; i++) {
                //创建option标签
                var op = document.createElement("option");

                op.value = i;
                op.innerText = provinces[i];

                pro.appendChild(op);
            }

        }

        function changeCity(obj) {
            //获取对应的city
            var city_arr = citys[obj.value];

            var city = document.getElementById("city");
            //清空city
            // city.innerHTML="";
            // city.innerHTML="<option value='-1'>===请您选择市===</option>";

            city.options.length = 1;//保留默认的===请您选择市===


            //遍历city_arr
            for (var i = 0; i < city_arr.length; i++) {
                var opt = document.createElement("option");

                opt.value = i;
                opt.innerText = city_arr[i];

                city.appendChild(opt);
            }

        }
    </script>

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="plugins/bootstrap/js/bootstrap.js"></script>
</body>

</html>